<!--  -->
<template>
  <div>
    <my-echarts :options="option" height="600px"></my-echarts>
  </div>

</template>
<script setup lang='ts' >
import { computed, PropType } from "vue"
import { convertData } from "../hooks"
import MyEcharts from "@/base-ui/echarts"

import { IRoseData } from "../types.ts"
const props = defineProps({
  mapData: {
    type: Array as PropType<IRoseData[]>,
    required: true
  },
})



let option = computed(() => {
  return {
    grid: {
      right: '10%',
      top: '10%',
      bottom: '10%',
      width: '10%',
    },
    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },

    tooltip: {
      trigger: 'item',
      formatter(e: any,) {
        return e.data ? `${e.name}:${e.data.value[2]}` : `${e.name}:0`
      }
    },
    visualMap: {
      min: 0,
      max: 1000,
      left: 26,
      bottom: 45,
      showLabel: !0,
      text: ["高", "低"],
      pieces: [{
        gt: 2000,
        label: "> 2000 人",
        color: "#7f1100"
      }, {
        gte: 1000,
        lte: 2000,
        label: "1000-2000人",
        color: "#ff5428"
      }, {
        gte: 100,
        lt: 1000,
        label: "100-1000人",
        color: "#ff8c71"
      }, {
        gt: 0,
        lt: 100,
        label: "0-100人",
        color: "#ffd768"
      }],
    },
    geo: {
      map: "china",
      roam: !1,
      scaleLimit: {
        min: 1,
        max: 2
      },
      zoom: 1.2,
      center: [105.83531246, 34.0267395887],
      top: 80,
      label: {
        show: 0,
        fontSize: "14",
        color: "rgba(0,0,0,0.7)"

      },
      emphasis: {
        areaColor: "#f2d5ad",
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        borderWidth: 0,

      },
      itemStyle: {
        // shadowBlur: 50,
        // shadowColor: 'rgba(0, 0, 0, 0.2)',
        borderColor: "rgba(0, 0, 0, 0.2)",
      }

    },
    series: [{
      type: "map",
      map: 'china',
      geoIndex: 0,
      coordinateSys: 'ge0',
      data: convertData(props.mapData)
    }]

  }

})



</script>
<style lang='less' scoped>
</style>
